<template>
	<div>
		<Header></Header>
		<Cover title="欢迎优秀的你加盟未来媒体实验室" subtitle="加入我们" img="jrwm.jpg"></Cover>
		<div class="page-content">
			<div class="menu">
				<div
					v-for="(item, index) in tabs"
					class="menu-item"
					:style="activeMenuItem == index ? 'color: #000' : ''"
					:key="item"
					@click="changeMenu(index)"
				>
					{{ item }}
				</div>
			</div>
			<div class="member-list">
				<div v-for="(item, index) in recruit" class="member-item" :key="index">
					<div class="title">{{ item.title }}</div>
					<div class="desc">
						<b>岗位工作：</b>
						<ul>
							<li>{{ item.work }}</li>
						</ul>
						<b>岗位要求：</b>
						<ul>
							<li>{{ item.requirement }}</li>
						</ul>
					</div>
					<!-- <a href="#">了解更多 <i class="el-icon-right"></i></a> -->.
					<a href="javascript:;" @click="showContactDialog">了解更多 <i class="el-icon-right"></i></a>
				</div>
			</div>
		</div>
		<!-- 联系方式弹窗 -->
<el-dialog
  title="加入我们"
  :visible.sync="dialogVisible"
  width="400px"
  custom-class="contact-dialog"
  center
>
  <div class="contact-content">
    <div class="contact-icon">
      <i class="el-icon-message"></i>
    </div>
    <div class="contact-title">欢迎加入未来媒体实验室</div>
    <div class="contact-info">
      <p>您可以通过以下方式联系我们：</p>
      <div class="email-box">
        <i class="el-icon-message"></i>
        <span>发送简历至：</span>
        <a href="mailto:wlmtsys@163.com"><span>{{email}}</span></a>
      </div>
	  
      <div class="qrcode-box">
		<!-- <img :src="weimg" alt="微信二维码"> -->
        <img :src="weimg" alt="公众号二维码" class="qrcode-img">
        <p>扫码关注公众号</p>
		<div class="phone-box">
		<i class="el-icon-phone"></i>
        <span>联系电话：</span>
		<a href="mailto:13719814204"><span><span>+86 {{phone}}</span></span></a>
		
	</div>
	<div>
		<i class="el-icon-location"></i>
		<span class="border-bottom">{{address}}</span>
	  </div>
      </div>
    </div>
  </div>
</el-dialog>
		<Footer></Footer>
	</div>
</template>

<script>
import axios from '../config/http';
export default {
	name: 'JoinUs',
	components: {
		Cover: () => import('@/components/Cover.vue'),
		Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
	},
	data() {
		return {
			recruit: [],
			tabs: ['大一', '大二', '大三'],
			activeMenuItem: 0,
			phone:'',
        weimg:'',
        email:'',
        address:'',
			dialogVisible: false  
		};
	},
	created() {
		this.loadData();
		this.loadFooterData();
	},
	methods: {
		showContactDialog() {
    this.dialogVisible = true;
  },

  methods:{

    },
		async loadData() {
			let res = await axios.get(`/is/employ/list/${this.activeMenuItem + 1}`);
			this.recruit = res.data.data.data;
		},
		async loadFooterData() {
			// 获取首页介绍
			let res = await axios.get(`/is/info/intro`);
			    this.phone = res.data.data.data[0].phone
                this.address = res.data.data.data[0].address
                this.email = res.data.data.data[0].email
                this.weimg = res.data.data.data[0].weimg
                
		},
		changeMenu(index) {
			this.activeMenuItem = index;
			this.loadData();
		}
	}
};
</script>

<style lang="less" scoped>
// 全局变量
@primary: #2c3e50;
@primary-hover: #34495e;
@secondary-bg: #ecf0f1;
@card-bg: #ffffff;
@border: #bdc3c7;
@highlight: #00c87c;
@text-main: #333333;
@text-sub: #7f8c8d;

.page-content {
	padding: 25px;
	background: @secondary-bg;
	min-height: 80vh;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: 
			linear-gradient(90deg, rgba(0, 200, 124, 0.03) 1px, transparent 1px),
			linear-gradient(rgba(0, 200, 124, 0.03) 1px, transparent 1px);
		background-size: 20px 20px;
		z-index: 0;
		animation: gridAnimation 20s linear infinite;
	}

	.menu {
		position: relative;
		display: flex;
		margin-bottom: 40px;
		z-index: 1;
		justify-content: center;
		gap: 20px;

		.menu-item {
			padding: 12px 30px;
			cursor: pointer;
			position: relative;
			color: @text-sub;
			font-size: 16px;
			transition: all 0.3s ease;
			border: 1px solid @border;
			border-radius: 8px;
			background: @card-bg;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

			&:hover, &.active {
				color: @highlight;
				border-color: @highlight;
				box-shadow: 0 4px 15px rgba(0, 200, 124, 0.15);
				transform: translateY(-2px);
			}
		}
	}

	.member-list {
		position: relative;
		z-index: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;

		.member-item {
			background: @card-bg;
			border-radius: 12px;
			padding: 25px;
			border: 1px solid @border;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
			height: auto;
			min-height: 280px;
			width: 300px;
			flex: 0 0 300px;
			transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
			position: relative;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background: linear-gradient(90deg, @highlight, lighten(@highlight, 10%));
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:hover {
				transform: translateY(-5px);
				box-shadow: 
					0 15px 30px rgba(0, 0, 0, 0.08),
					0 0 0 1px rgba(0, 200, 124, 0.1);
				border-color: @highlight;

				&::before {
					opacity: 1;
				}

				.title {
					color: @highlight;
				}

				a {
					background: @highlight;
					color: #fff;
					border: none;
					box-shadow: 0 4px 15px rgba(0, 200, 124, 0.2);
			}
			}

			.title {
				font-size: 20px;
				font-weight: 600;
				color: @primary;
				margin-bottom: 15px;
				transition: all 0.3s ease;
				line-height: 1.4;
			}

			.desc {
				color: @text-sub;
				margin-bottom: 20px;
				flex: 1;
				line-height: 1.6;

				b {
				display: block;
					color: @primary;
					margin: 15px 0 8px;
					font-size: 16px;
					font-weight: 600;
					transition: all 0.3s ease;
				}

				ul {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						position: relative;
						padding-left: 18px;
						margin-bottom: 8px;
						line-height: 1.5;
						color: @text-sub;
						font-size: 14px;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 7px;
							width: 6px;
							height: 6px;
							background: @highlight;
							border-radius: 50%;
							transition: all 0.3s ease;
						}
					}
				}
			}

			a {
				display: inline-flex;
				align-items: center;
				padding: 10px 20px;
				background: rgba(0, 200, 124, 0.05);
				border: 1px solid rgba(0, 200, 124, 0.15);
				border-radius: 25px;
				color: @highlight;
				text-decoration: none;
				font-size: 14px;
				font-weight: 500;
				transition: all 0.3s ease;
				align-self: flex-start;

				i {
					margin-left: 6px;
					transition: transform 0.3s ease;
				}

				&:hover {
					i {
						transform: translateX(4px);
					}
				}
			}
		}
	}
}

@keyframes gridAnimation {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 20px 20px;
	}
}

@media screen and (max-width: 1200px) {
	.page-content .member-list {
		gap: 20px;
		padding: 0 15px;
		}
	}

	@media screen and (max-width: 768px) {
	.page-content {
		padding: 15px;

		.member-list {
			gap: 15px;
			padding: 0 10px;

			.member-item {
				padding: 20px;
            }
		}
	}
}
// 弹窗样式
:deep(.contact-dialog) {
  border-radius: 16px;
  overflow: hidden;

  .el-dialog__header {
    padding: 20px;
    background: linear-gradient(135deg, @highlight, lighten(@highlight, 10%));
    margin-right: 0;

    .el-dialog__title {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      top: 20px;

      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    padding: 30px;
  }
}

.contact-content {
  text-align: center;

  .contact-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(0, 200, 124, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      font-size: 40px;
      color: @highlight;
    }
  }

  .contact-title {
    font-size: 24px;
    color: @primary;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .contact-info {
    p {
      color: @text-sub;
      margin-bottom: 15px;
    }
	// .phone-box{
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	gap: 10px;
	// 	margin-bottom: 0px;
	// 	i{
	// 		margin-right: 10px;}
	// }

    .email-box,.phone-box {
      background: rgba(0, 200, 124, 0.05);
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      i {
        color: @highlight;
      }

      a {
        color: @highlight;
        text-decoration: none;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .qrcode-box {
      .qrcode-img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid @border;
        padding: 5px;
      }

      p {
        color: @text-sub;
        margin: 0;
      }
    }
  }
}
</style>
